<template>
	<div class="video-content">
		<el-row>
			<el-tabs v-model="activeCategory" tab-position="top" @tab-click="query(1)" :class="searchBarFixed == true ? 'isFixed':''">
				<el-tab-pane label="全部" name=""></el-tab-pane>
				<template v-for="(item,index) in mediaCategorys">
					<el-tab-pane :label="item.name" :name="item.code"></el-tab-pane>
				</template>
			</el-tabs>
		</el-row>
		<!-- <el-image src="http://hbimg.huabanimg.com/03371723d3ac4f1075e0a488d0b8a3ac67794d3e1332636-oJIKsg_fw658/format/webp" /> -->
		<masonry id="masonry" class="m-t-sm" :cols="{default: 6, 1400: 6, 1000: 4, 800: 3, 500: 3, 400: 2}" :gutter="{default: '10px', 700: '15px'}">
			<div class="item" v-for="(item, index) in list" :key="index">
				<div class="top">
					<span class="badge bg-dark m-l-sm m-t-sm">{{ item.duration }}</span>
				</div>
				<a href="javascript:void(0)" @click="choseVideo(item)">
					<el-image :src="$api.file.view + item.poster"></el-image>
				</a>
			</div>
		</masonry>

		<el-divider id="btm">
			<!-- 自动滚动时显示 -->
			<p v-if="loading">加载中...</p>
			<p v-if="noMore">没有更多了</p>
		</el-divider>

		<el-dialog :title="activeVideo.title" top="2vh" width="60%" :visible.sync="dialogVisible" :close-on-click-modal="false"
		 @opened="play()" @close="pause()" append-to-body>
			<video id="my-video" class="video-js" controls preload="auto" poster="" data-setup='{}'>
			</video>

			<div v-if="activeVideo.isSeries" style="line-height: 40px; margin-top: 10px;">
				<el-button :class="activeIndex == index ? 'active':''" v-for="(item,index) in videoItems" :key="index" @click="playItem(item);activeIndex=index">{{item.title}}</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	// videojs
	import videojs from 'video.js'
	window.videojs = videojs
	// hls plugin for videojs6 支持m3u8格式插件
	require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
	// 播放 RTMP 流，需要安装 videojs-flash 插件
	require('videojs-flash/dist/videojs-flash.min.js')
	var myPlayer;

	var channelBar; //频道栏目元素
	var channelBarWidth; //频道栏目初始化宽度

	export default {
		name: 'video',
		components: {

		},
		data() {
			return {
				searchBarFixed: false, //固定搜索框
				mediaCategorys: [],
				activeCategory: null,
				list: [],
				activeVideo: {},
				dialogVisible: false,
				videoItems: [], //集
				activeIndex: 0,
				total: 0, // 记录总条数
				pageSize: 20, // 每页显示条数
				pageNo: 1, // 当前的页数
				loading: false,
				noMore: false
			}
		},
		mounted() {
			//获取栏目元素，并获取初始化宽度，添加滚动监听事件
			channelBar = document.querySelector('.video-content .el-tabs__nav-wrap');
			channelBarWidth = channelBar.offsetWidth;
			window.addEventListener('scroll', this.handleScroll);

			//初始化播放器
			// this.initVideo();

			//初始化分类
			this.$api.sysDict.queryDictItems("video_category").then(data => {
				this.mediaCategorys = data;
			});

			this.query();
		},
		methods: { //设置当前播放视频
			initVideo() {
				videojs(
					"my-video", {
						bigPlayButton: false,
						textTrackDisplay: false,
						posterImage: true,
						errorDisplay: false,
						controlBar: true
					},
					function() {
						this.play();
					}
				);
				myPlayer = videojs("my-video");
			},
			play() {
				if (myPlayer == null) {
					this.initVideo();
				}

				if (this.activeVideo.isSeries) {
					this.queryVideoItems(); //集
				} else {
					myPlayer.src([{
						// type: "application/x-mpegURL",
						src: this.activeVideo.url
					}]);
					myPlayer.play();
				}
			},
			playItem(item) {
				myPlayer.src([{
					// type: "application/x-mpegURL",
					src: item.url
				}]);
				myPlayer.play();
			},
			pause() {
				myPlayer.pause();
			},
			choseVideo(video) {
				this.dialogVisible = true;
				this.activeVideo = video;
			},
			query(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.video.query({
					publish: 1,
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					category: this.activeCategory == 0 ? null : this.activeCategory
				}).then(data => {
					this.list = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
				});
			},
			queryVideoItems() {
				this.$api.videoItem.list({
					videoId: this.activeVideo.id
				}).then(data => {
					this.videoItems = data;
				});
			},
			//滚动条事件， 固定栏目
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				var offsetTop = channelBar.offsetTop
				if (scrollTop > 60 && scrollTop > offsetTop) {
					this.searchBarFixed = true
					channelBar.style.width = channelBarWidth + 'px'
				} else {
					this.searchBarFixed = false
				}
				var top = document.querySelector('#btm').offsetTop;
				var bottom = top - scrollTop - $(window).height();
				console.debug(scrollTop, offsetTop, top, $(window).height(), bottom)
				if (this.scrollQuery && bottom < 300 && this.loading == false) {
					this.loading = true;
					this.query(this.pageNo + 1)

				}
			}
		},
		destroyed() {
			myPlayer.dispose()
			window.removeEventListener('scroll', this.handleScroll)
		}
	}
</script>

<style scoped="scoped">
	@import url("~video.js/dist/video-js.css");

	.isFixed {
		position: fixed;
		z-index: 9999;
		background-color: #FFFFFF;
		top: 0;
	}

	.video-js {
		width: 100%;
	}

	.active {
		color: #1e82d2;
		border-color: #409EFF;
	}

	.el-button {
		margin: 5px !important;
	}

	.item {
		position: relative;
	}

	.item .top {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}

	.bg-dark {
		background-color: #5a6a7a;
		color: #fdf7f7 !important;
	}

	.badge,
	.label {
		font-weight: bold;
	}

	.badge {
		display: inline-block;
		min-width: 10px;
		padding: 3px 7px;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		background-color: #777;
		border-radius: 10px;
	}
	
</style>
